<template>
    <div class="main">
        <ul class="todo-list">
            <li v-for="item in props.list" :key="item.id">
                <div class="view">
                    <input type="checkbox" class="toggle" v-model="item.done">
                    <label>{{ item.name }}</label>
                    <button class="destroy"
                    @click="delTodo(item.id)"></button>
                </div>
            </li>
        </ul>
    </div>
</template>

<script setup>
const props = defineProps(['list'])
const emit = defineEmits(['delToDo'])
const delTodo = (id) => {
    console.log(id, '==删除==')
    // 要处理数据，删除！！但是由于单向数据流，子组件无法直接处理数据，
    // 所以需要通知父组件修改，发送自定义事件
    id && emit('delToDo', id)
}
</script>

<style scoped>

</style>